<template>
	<view class="context">
		<view class="popup">
			<u-popup :show="popupShow" mode="center" :closeable="true" @close="close" :round="5" :customStyle="cstyle" :safeAreaInsetBottom="false">
				<view class="title">团长申请</view>
				<view class="form">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth="110" :errorType="errorType">
						<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入"
								placeholderStyle="text-align: right" inputAlign="right"></u--input>
						</u-form-item>
						<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
								border="none" placeholderStyle="text-align: right" inputAlign="right"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="电话号码" labelWidth="75" prop="userInfo.mobile" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.mobile" border="none" placeholder="请输入"
								placeholderStyle="text-align: right" inputAlign="right"></u--input>
						</u-form-item>
						<u-form-item label="身份证号码" labelWidth="90" prop="userInfo.idnum" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.idnum" border="none" placeholder="请输入"
								placeholderStyle="text-align: right" inputAlign="right"></u--input>
						</u-form-item>
						<u-form-item label="就职单位" labelWidth="75" prop="userInfo.company" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.company" border="none" placeholder="请输入"
								placeholderStyle="text-align: right" inputAlign="right"></u--input>
						</u-form-item>
						<u-form-item label="详细地址" labelWidth="75" prop="userInfo.address" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.address" border="none" placeholder="请输入"
								placeholderStyle="text-align: right" inputAlign="right"></u--input>
						</u-form-item>
						<u-form-item label="期望负责楼层" prop="userInfo.floor" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.floor" border="none" placeholder="请输入"
								placeholderStyle="text-align: right" inputAlign="right"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="btn-box">
					<view class="btn" @click="submit">提交申请</view>
				</view>
			</u-popup>
		</view>

		<u-action-sheet :show="showSex" :actions="actions" :closeOnClickOverlay="true" title="请选择性别"
			@close="showSex = false" @select="sexSelect" round="10">
		</u-action-sheet>
		<!-- 提示弹框 -->
		<my-toast :type="0" :content="showContent" :toastShow="toastShow"></my-toast>
	</view>
</template>

<script>
	export default {
		name: "apply-popup",
		props: {
			popupShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				errorType: 'toast',
				cstyle: {
					'width': '90vw !important',
				},
				toastShow: false,
				showContent: '',
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
						mobile: '',
						idnum: '',
						company: '',
						address: '',
						floor: ''
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				// 校验规则
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					// 正则判断为字母或数字
					'userInfo.idnum': {
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字'
					},
					'userInfo.mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},

			};
		},
		computed: {

		},
		onReady() {
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			// 选择性别
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			// 关闭
			close() {
				// this.popupShow = false
				this.$emit('closePopup')
				this.showSex = false
			},
			// 提交
			submit() {
				this.$refs.form1.validate().then(res => {
					this.$emit('submit', this.model1)
				}).catch(errors => {
					this.toastShow = true
					this.showContent = '校验失败'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.context {
		width: 100vw;

		.popup {
			width: 90% !important;
		}

		.title {
			font-size: 35rpx;
			font-weight: bold;
			text-align: center;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #c7c7c7;
		}

		.form {
			padding: 0 25rpx 20rpx;
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			padding: 0 25rpx;

			.btn {
				background-color: #FFCA39;
				padding: 10rpx 40rpx;
				border-radius: 40rpx;
				margin-bottom: 25rpx;
				text-align: center;
			}
		}

	}
</style>
